<template>
  <view v-if="show" class="mask">
    <view v-if="isLoading" class="mask-cont">
      <view class="mask-icon"></view>
      <view class="mask-text">
        <text v-if="title">{{ title }}</text>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useEnvStore } from '@/store/env'

const props = defineProps<{
  show: boolean
  type: 'loading' | 'toast'
  icon?: 'success' | 'error' | 'loading' | 'none'
  title?: string
}>()

const envStore = useEnvStore()
const headerHeight = computed(() => `${envStore.titleBarHeight}px`)
const fullHeaderHeight = computed(() => `-${envStore.titleBarHeight}px`)
const isLoading = ref(false)

watch(
  () => props.show,
  (show) => {
    switch (props.type) {
      case 'loading':
        if (show) {
          // dismiss toast
          uni.hideLoading()
          uni.hideToast()
        }

        isLoading.value = show
        break
      case 'toast': {
        if (show) {
          // dismiss element
          isLoading.value = false

          uni.showToast({
            title: props.title,
            icon: props.icon || 'loading',
            mask: true,
          })
        } else {
          uni.hideToast()
        }
        break
      }
      default: {
        break
      }
    }
  },
  { immediate: true }
)
</script>

<style lang="less">
.mask {
  width: 100%;
  height: calc(100% - v-bind(headerHeight));
  position: fixed;
  top: v-bind(headerHeight);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0 40rpx;
  box-sizing: border-box;
  .mask-cont {
    width: 272rpx;
    height: 272rpx;
    background-color: #4c4c4b;
    border-radius: 24rpx;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    margin-top: v-bind(fullHeaderHeight);
    padding: 40rpx 24rpx;
    box-sizing: border-box;
    .mask-icon {
      flex-shrink: 0;
      width: 72rpx;
      height: 72rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center center;
      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2236px%22%20height%3D%2236px%22%20viewBox%3D%220%200%2036%2036%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22pattern-1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20patternUnits%3D%22objectBoundingBox%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23image-2%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%20%20%3Cimage%20id%3D%22image-2%22%20width%3D%2236%22%20height%3D%2236%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAJKADAAQAAAABAAAAJAAAAAAqDuP8AAAC90lEQVRYCbWWS5JTMQxF%2B%2FEpmDFmSBUTdske2FuPWATM%2BAcdJ6dzI%2FwSKnlRlXNlWZZObPdn2e12Hx8eHpbJeBYxfbT7zD8ty%2FJYerNRbHdh0IQczNz97Pj5%2Fuje5v0PkBAdKuMfbsM47n5Rro2O0b1nPBWf6%2B32rgeunV8DBJTj2r6r%2BwTym3OF2p9ymKtCqOThb2oA0dBr0BdsDeZuUJ5Q%2F5YJRnPmGvAC3eWELE6jHF4XIPjmCet8U6h%2BZTTXbOxcvfsJ2ThPRz9PKYFy3ZNy%2FSbNN0RhG6nEfOA2cg3dFIYG%2Fcqymb5N1QTjdIlvZueAaAJUPuhs7trzysk4%2B642r4yCNFApmCfkmiciAPHNgWii0QBLxWf4%2BFHByh1AWYPY1eaVWUCQPhdK%2FV0Jv2qg2Ku93P7ZgazYwXpcsB%2B18N3FLXQNqNf2zRDXR7kqTupz%2Fef5tvTrYe6Vmlvhp334%2F1j9xzly14BmhYg5aOi1fSv%2FS403NTDmXmeCWbPr2FRfaMQBsslYOMzxc6M5NHDQ9GcNAaj1ugZGXCj2roHZgz3D94RcmCkxCwrj6fCGaE4Ov69e1iAH4535p8d95OUgjzk2VCADuZgbBQIEH81TICYAv5eoixEj1x%2BCrJk%2BuaP3JSBBVIG8DuMUTKCMu8Y6TV2bAe0AyoVBOdlIEYdQzm1QKSdQ1jIOELlq7zuAPSEX2axvo9RLMBRl8Hb8G1juiQlqn9RFIHbkAn6COCfmMJ%2B9mjDkJBC5mr77T3R2ZZmQUIKkmmszgLA8KXKA05hj7qUexp7pGyJREH0hLKJSCGOunYMhh1oACuJJjhpemQ26zkCICWB%2BhYYJc06FEUQwCow3ZNGuNiaefs8bJBTTOfgzqIQRRLBRd%2B0NCaAmFH2F0kc1QZjrq8ZS8Z9sBpQQNu5qAeJrJoTq6TDHnO9nh88OdA6GLWtgFrX5TNlrPPP1h3ag3nBtflLkwkQIFFO7PxYvAZEEFCZc98fi5EMQ9umTdhboL8rq8CalrMhdAAAAAElFTkSuQmCC%22%3E%3C%2Fimage%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22%E6%8E%A7%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22loading_icon%E5%A4%87%E4%BB%BD%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18%2C0%20C27.9411255%2C0%2036%2C8.0588745%2036%2C18%20C36%2C27.9411255%2027.9411255%2C36%2018%2C36%20C8.0588745%2C36%200%2C27.9411255%200%2C18%20C0%2C8.0588745%208.0588745%2C0%2018%2C0%20Z%20M18%2C3%20C9.71572875%2C3%203%2C9.71572875%203%2C18%20C3%2C26.2842712%209.71572875%2C33%2018%2C33%20C26.2842712%2C33%2033%2C26.2842712%2033%2C18%20C33%2C9.71572875%2026.2842712%2C3%2018%2C3%20Z%22%20id%3D%22Combined-Shape%22%20fill%3D%22url(%23pattern-1)%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2218%22%20cy%3D%221.5%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
      animation: loading 3s linear 50ms infinite;
    }
    .mask-text {
      font-size: 34rpx;
      font-weight: 400;
      line-height: 48rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-top: 36rpx;
      text-align: center;
    }
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
